// 全局响应式和高分辨率屏幕适配配置
// 适用于娱乐票务系统管理端

@use "sass:map";

// ===== 断点定义 =====
$breakpoints: (
  mobile: 768px,
  tablet: 1024px,
  desktop: 1200px,
  large-desktop: 1440px,
  ultra-wide: 1920px,
  2k: 2560px,
  4k: 3840px
);

// ===== 媒体查询混入 =====
@mixin respond-to($breakpoint) {
  @if map.has-key($breakpoints, $breakpoint) {
    @media (min-width: map.get($breakpoints, $breakpoint)) {
      @content;
    }
  } @else {
    @warn "断点 `#{$breakpoint}` 不存在于 $breakpoints 映射中。";
  }
}

// ===== 高分辨率适配变量 =====
// 基础尺寸
$base-font-size: 14px;
$base-padding: 16px;
$base-margin: 16px;
$base-border-radius: 4px;

// 2K屏幕适配 (2560px+)
$font-size-2k: 16px;
$padding-2k: 20px;
$margin-2k: 20px;
$border-radius-2k: 6px;

// 4K屏幕适配 (3840px+)
$font-size-4k: 18px;
$padding-4k: 24px;
$margin-4k: 24px;
$border-radius-4k: 8px;

// ===== 全局高分辨率适配样式 =====
// 2K屏幕适配
@include respond-to(2k) {
  html {
    font-size: 110%; // 基础字体放大10%
  }
  
  body {
    font-size: $font-size-2k;
  }
  
  // 侧边栏适配
  .sidebar {
    width: 280px !important;
    
    .nav-item {
      padding: 14px 20px !important;
      font-size: 15px !important;
    }
    
    .logo {
      padding: 24px 20px !important;
      font-size: 20px !important;
    }
  }
  
  // 主内容区适配
  .main-content {
    margin-left: 280px !important;
    padding: $padding-2k !important;
  }
  
  // 卡片组件适配
  .card, .stat-card {
    padding: $padding-2k !important;
    border-radius: $border-radius-2k !important;
    
    h3 {
      font-size: 20px !important;
    }
    
    p {
      font-size: $font-size-2k !important;
    }
  }
  
  // 按钮适配
  .btn {
    padding: 12px 24px !important;
    font-size: $font-size-2k !important;
    border-radius: $border-radius-2k !important;
  }
  
  // 表格适配
  .table {
    th, td {
      padding: 14px $padding-2k !important;
      font-size: $font-size-2k !important;
    }
  }
  
  // 表单适配
  .form-control {
    padding: 12px $padding-2k !important;
    font-size: $font-size-2k !important;
    border-radius: $border-radius-2k !important;
  }
}

// 4K屏幕适配
@include respond-to(4k) {
  html {
    font-size: 125%; // 基础字体放大25%
  }
  
  body {
    font-size: $font-size-4k;
  }
  
  // 侧边栏适配
  .sidebar {
    width: 320px !important;
    
    .nav-item {
      padding: 16px 24px !important;
      font-size: 17px !important;
    }
    
    .logo {
      padding: 28px 24px !important;
      font-size: 24px !important;
    }
  }
  
  // 主内容区适配
  .main-content {
    margin-left: 320px !important;
    padding: $padding-4k !important;
  }
  
  // 卡片组件适配
  .card, .stat-card {
    padding: $padding-4k !important;
    border-radius: $border-radius-4k !important;
    
    h3 {
      font-size: 24px !important;
    }
    
    p {
      font-size: $font-size-4k !important;
    }
  }
  
  // 按钮适配
  .btn {
    padding: 14px 28px !important;
    font-size: $font-size-4k !important;
    border-radius: $border-radius-4k !important;
  }
  
  // 表格适配
  .table {
    th, td {
      padding: 16px $padding-4k !important;
      font-size: $font-size-4k !important;
    }
  }
  
  // 表单适配
  .form-control {
    padding: 14px $padding-4k !important;
    font-size: $font-size-4k !important;
    border-radius: $border-radius-4k !important;
  }
  
  // 图表组件适配
  .chart {
    height: 450px !important;
  }
}

// ===== 响应式网格系统 =====
.responsive-grid {
  display: grid;
  gap: $base-margin;
  
  // 移动端
  grid-template-columns: 1fr;
  
  // 平板
  @include respond-to(tablet) {
    grid-template-columns: repeat(2, 1fr);
  }
  
  // 桌面
  @include respond-to(desktop) {
    grid-template-columns: repeat(3, 1fr);
  }
  
  // 大屏桌面
  @include respond-to(large-desktop) {
    grid-template-columns: repeat(4, 1fr);
  }
  
  // 2K屏幕
  @include respond-to(2k) {
    gap: $margin-2k;
    grid-template-columns: repeat(5, 1fr);
  }
  
  // 4K屏幕
  @include respond-to(4k) {
    gap: $margin-4k;
    grid-template-columns: repeat(6, 1fr);
  }
}

// ===== 工具类 =====
// 高分辨率隐藏/显示
.hide-on-2k {
  @include respond-to(2k) {
    display: none !important;
  }
}

.hide-on-4k {
  @include respond-to(4k) {
    display: none !important;
  }
}

.show-on-2k {
  display: none;
  @include respond-to(2k) {
    display: block !important;
  }
}

.show-on-4k {
  display: none;
  @include respond-to(4k) {
    display: block !important;
  }
}

// 高分辨率文字大小
.text-2k {
  @include respond-to(2k) {
    font-size: $font-size-2k !important;
  }
}

.text-4k {
  @include respond-to(4k) {
    font-size: $font-size-4k !important;
  }
}

// 高分辨率间距
.p-2k {
  @include respond-to(2k) {
    padding: $padding-2k !important;
  }
}

.p-4k {
  @include respond-to(4k) {
    padding: $padding-4k !important;
  }
}

.m-2k {
  @include respond-to(2k) {
    margin: $margin-2k !important;
  }
}

.m-4k {
  @include respond-to(4k) {
    margin: $margin-4k !important;
  }
}